<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yunmeng</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/yunmeng.css">
    <script src="/js/login.js"></script>
</head>

<body>
    <div class="top">
        <a href="#" class="logo"></a>
        <div class="search">
            <input type="text" placeholder="东方project">
            <i class="fa-solid fa-magnifying-glass"></i>
        </div>
        <a href="./logo-in.html" class="login">
            登录
        </a>
    </div>

    <div class="nav-bar-1">
        <ul class="shell1">
            <li class="button1">
                <span>游戏</span>
                <ul>
                    <li><a href="#">GalGame</a></li>
                    <li><a href="#">单机游戏</a></li>
                    <li><a href="#">SLG</a></li>
                </ul>
            </li>
            <li class="button1">
                <span>ACG</span>
                <ul>
                    <li>动漫</li>
                    <li>漫画</li>
                    <li>小说</li>
                </ul>
            </li>
            <li class="button1">
                <span>同人二创</span>
                <ul>
                    <li>同人小说</li>
                    <li>同人漫画</li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="show-nap">

        <div class="box">
            <div class="min-box">
                <span>欢迎来到YunMeng</span>
                <h1>一站式 ACG 网站社区!</h1>
                <p>免费,高质量的网站推荐站</p>
                <button>随机一个网站</button>
            </div>
            <div class="other">
                <ul>
                    <li><a href="#"><i class="fa-regular fa-tag"></i>标签</a></li>
                    <li><a href="#"><i class="fa-regular fa-comment"></i>论坛</a></li>
                    <li><a href="#"><i class="fa-regular fa-file"></i>文档</a></li>
                </ul>
            </div>
        </div>

        <div class="shell">
            <ul class="imges">
                <li class="img"></li>
                <li class="img"></li>
                <li class="img"></li>
                <li class="img"></li>
                <li class="img"></li>
            </ul>
            <ul class="min">
                <li class="m"></li>
                <li class="m"></li>
                <li class="m"></li>
                <li class="m"></li>
                <li class="m"></li>
            </ul>
            <div class="button">
                <div class="button-left">&lt;</div>
                <div class="button-right">&gt;</div>
            </div>
        </div>
    </div>

    <div class="recommend">
        <div class="hd">
            <h1><i class="fa-solid fa-fire"></i>热门网站</h1>
            <a href="#">查看全部</a>
        </div>
        <div class="bd">
            <ul>
                <li>
                    <a href="/介绍页/HTML/galGame1.html" class="pic"><img src="/网站资源/主网站素材/galgame/CnGal资料站.png"
                            alt=""></a>
                    <div class="text">
                        <h2>GnGal资料网站</h2>
                        <div class="tag">
                            <span>galgame</span><span>双端通用</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="/介绍页/HTML/galGame1.html" class="pic"><img src="/网站资源/主网站素材/单机游戏/单机游戏1.png" alt=""></a>
                    <div class="text">
                        <h2>土豆游戏网</h2>
                        <div class="tag">
                            <span>单机游戏</span><span>双端通用</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="pic"><img src="/网站资源/主网站素材/小说/轻小说文库.png" alt=""></a>
                    <div class="text">
                        <h2>轻小说文库</h2>
                        <div class="tag">
                            <span>轻小说</span><span>双端通用</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="/介绍页/HTML/轻小说1.html" class="pic"><img src="/网站资源/主网站素材/小说/哔哩轻小说.png" alt=""></a>
                    <div class="text">
                        <h2>哔哩轻小说</h2>
                        <div class="tag">
                            <span>轻小说</span><span>双端通用</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="pic"><img src="/网站资源/主网站素材/galgame/CnGal资料站.png" alt=""></a>
                    <div class="text">
                        <h2>GnGal资料网站</h2>
                        <div class="tag">
                            <span>galgame</span><span>双端通用</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="pic"><img src="/网站资源/主网站素材/galgame/CnGal资料站.png" alt=""></a>
                    <div class="text">
                        <h2>GnGal资料网站</h2>
                        <div class="tag">
                            <span>galgame</span><span>双端通用</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="pic"><img src="/网站资源/主网站素材/galgame/CnGal资料站.png" alt=""></a>
                    <div class="text">
                        <h2>GnGal资料网站</h2>
                        <div class="tag">
                            <span>galgame</span><span>双端通用</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="pic"><img src="/网站资源/主网站素材/galgame/CnGal资料站.png" alt=""></a>
                    <div class="text">
                        <h2>GnGal资料网站</h2>
                        <div class="tag">
                            <span>galgame</span><span>双端通用</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="pic"><img src="/网站资源/主网站素材/galgame/CnGal资料站.png" alt=""></a>
                    <div class="text">
                        <h2>GnGal资料网站</h2>
                        <div class="tag">
                            <span>galgame</span><span>双端通用</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="pic"><img src="/网站资源/主网站素材/galgame/CnGal资料站.png" alt=""></a>
                    <div class="text">
                        <h2>GnGal资料网站</h2>
                        <div class="tag">
                            <span>galgame</span><span>双端通用</span>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>

    <div class="copyright">
        <div class="wrapper">
            <div class="left">
                <a href="#"><img src="../网站资源/云梦logo.png" alt=""></a>
                <p>云梦的小站,致力于收集推荐好用的网站</p>
            </div>

            <div class="right">
                <dl>
                    <dt>关于我们</dt>
                    <dd><a href="#">微信团队</a></dd>
                    <dd><a href="/HTML/join.html">加入我们</a></dd>
                    <dd><a href="#">客服服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">新手指南</a></dt>
                    <dd><a href="#">快速查找网站</a></dd>
                    <dd><a href="#">网站介绍</a></dd>
                    <dd><a href="#">使用事项</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作团队</a></dd>
                    <dd><a href="#">合作伙伴</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>
<script>
    let left = document.querySelector(".button-left")
    let right = document.querySelector(".button-right")
    let m = document.querySelectorAll(".m")
    let imges = document.querySelector(".imges")

    let index = 0
    let time

    function position() {
        imges.style.left = (index * -100) + "%"
    }

    function add() {
        if (index >= m.length - 1) {
            index = 0
        } else {
            index++
        }
    }

    function desc() {
        if (index < 1) {
            index = m.length - 1
        } else {
            index--
        }
    }

    function timer() {
        time = setInterval(() => {
            index++
            desc()
            add()
            position()
        }, 3000)
    }

    left.addEventListener("click", () => {
        desc()
        position()
        clearInterval(time)
        timer()
    })
    right.addEventListener("click", () => {
        add()
        position()
        clearInterval(time)
        timer()
    })
    for (let i = 0; i < m.length; i++) {
        m[i].addEventListener("click", () => {
            index = i
            position()
            clearInterval(time)
            timer()
        })
    }
    timer()
</script>

</html>